<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:图层管理控件样式优化</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import "leaflet.markercluster";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
let map = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  }).setView(config.mapInitParams.center, config.mapInitParams.zoom);
  //创建底图切换数据源
  const baseLayer1 = L.tileLayer(config.baseMaps[0].Url); //OSM街道图
  const baseLayer2 = L.tileLayer(config.baseMaps[1].Url); //ArcGIS影像图
  const baseLayer3 = L.tileLayer(config.baseMaps[2].Url); //ArcGIS街道图
  const baseLayer4 = L.tileLayer(config.baseMaps[3].Url, {
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
  }); //天地图街道图
  const baseLayer5 = L.tileLayer(config.baseMaps[4].Url, {
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
  }); //天地图影像图
  // const baseLayer6 = L.tileLayer(config.baseMaps[5].Url); //谷歌街道图
  // const baseLayer7 = L.tileLayer(config.baseMaps[6].Url); //谷歌影像图
  const baseLayer8 = L.tileLayer(config.baseMaps[7].Url, {
    subdomains: ["1", "2", "3", "4"],
  }); //高德街道图
  const baseLayer9 = L.tileLayer(config.baseMaps[8].Url, {
    subdomains: ["1", "2", "3", "4"],
  }); //高德影像图
  // 标注点
  const labelPointLayer = L.markerClusterGroup({
    showCoverageOnHover: false,
    zoomToBoundsOnClick: true,
    chunkedLoading: true,
    maxClusterRadius: 5, //默认80
  });
  //标注点数据源
  const pointData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [113.3236710000001, 23.105979000000048],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [113.32410300000004, 23.11145900000008],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [113.32379999900002, 23.141812000000073],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [113.324302999, 23.134363000000064],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [113.32449100000008, 23.13119800000004],
        },
      },
    ],
  };
  addLabelClusterLayers(pointData, labelPointLayer);
  //多边形数据源
  const polygonData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [113.39529680600003, 23.134205542000075],
              [113.39951846600002, 23.132899270000053],
              [113.40540365300001, 23.131711419000055],
              [113.407067848, 23.13135476800005],
              [113.40760249300001, 23.127608680000037],
              [113.40825579900002, 23.121127312000056],
              [113.40783967700008, 23.119581296000035],
              [113.40760185600004, 23.11821366500004],
              [113.4074233980001, 23.115835169000036],
              [113.40742319900005, 23.11292151400005],
              [113.40653156200005, 23.111078143000043],
              [113.40504556000008, 23.110186069000065],
              [113.40367824600003, 23.10792628300004],
              [113.40130043800002, 23.109055513000044],
              [113.39886288100001, 23.109827705000043],
              [113.39749535700003, 23.11036229800004],
              [113.39606837500003, 23.112264421000077],
              [113.393808691, 23.11369027900008],
              [113.39089451000007, 23.114877628000045],
              [113.389050655, 23.115649269000073],
              [113.39018106200001, 23.119396247000054],
              [113.39125199500006, 23.12397560000005],
              [113.39256070300007, 23.127484736000042],
              [113.39380988000005, 23.13123161200008],
              [113.39529680600003, 23.134205542000075],
            ],
          ],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [113.33322006000003, 23.14956013500006],
              [113.34180859000003, 23.14690472600006],
              [113.34535589200004, 23.14604149300004],
              [113.35008544000004, 23.14549095500007],
              [113.35462802800009, 23.145747547000042],
              [113.35873467500005, 23.14581667500005],
              [113.36452054900008, 23.144210481000073],
              [113.36856390500009, 23.142973833000042],
              [113.37478344400006, 23.140434764000076],
              [113.3823073100001, 23.13733668000009],
              [113.38547790900009, 23.136407730000087],
              [113.39511152600005, 23.134240053000042],
              [113.39647854300006, 23.13386794900009],
              [113.39579489300002, 23.13181717300006],
              [113.39517338000007, 23.130014947000063],
              [113.393868193, 23.12696961800009],
              [113.39268715000003, 23.12280587300006],
              [113.39131949500006, 23.117212834000043],
              [113.3905113830001, 23.115161812000053],
              [113.38920615500001, 23.11540937700005],
              [113.38640903200007, 23.116525497000055],
              [113.38441974200009, 23.11689649100009],
              [113.37733167500005, 23.118628684000043],
              [113.37366255500001, 23.119307604000085],
              [113.36252829900002, 23.122584602000074],
              [113.35624435400007, 23.123879051000074],
              [113.35282202600001, 23.12418376900007],
              [113.34908837800003, 23.12504695800004],
              [113.34448322800006, 23.125473412000076],
              [113.33881984100003, 23.126021945000048],
              [113.33272058700004, 23.126383109000074],
              [113.33328096000002, 23.12980158000005],
              [113.33365460700008, 23.133033286000057],
              [113.33334353800001, 23.134834588000047],
              [113.332659229, 23.13936908100004],
              [113.33203707900009, 23.142785270000047],
              [113.33178828300004, 23.14508375400004],
              [113.33247306600003, 23.14750828800004],
              [113.33322006000003, 23.14956013500006],
            ],
          ],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [113.24957228400001, 23.105308772000058],
              [113.2555564700001, 23.10753574800009],
              [113.26057105100006, 23.109558226000047],
              [113.2656528440001, 23.11192656500009],
              [113.26885555700005, 23.112972209000077],
              [113.27268533900008, 23.113252920000036],
              [113.27679418800005, 23.112490215000037],
              [113.27923190400008, 23.111656950000054],
              [113.28341130700005, 23.109851071000037],
              [113.28724294800008, 23.108323796000036],
              [113.29009951700004, 23.106447698000068],
              [113.292747287, 23.104641176000086],
              [113.2963709920001, 23.10388036900008],
              [113.302992173, 23.103472541000087],
              [113.3101023160001, 23.102927288000046],
              [113.31316983600004, 23.104324812000073],
              [113.31540089400005, 23.10599942300007],
              [113.31637697000008, 23.106210005000037],
              [113.31672554300008, 23.105862578000085],
              [113.3164463920001, 23.101824639000085],
              [113.31630670100003, 23.098065390000045],
              [113.31623678000005, 23.09507198400007],
              [113.31226290100005, 23.094925731000046],
              [113.30835897400004, 23.09464062300009],
              [113.30508267100004, 23.094217579000087],
              [113.30431587700002, 23.09365946300005],
              [113.302085261, 23.091776460000062],
              [113.29985478800006, 23.090311239000073],
              [113.29734575400005, 23.09016835200009],
              [113.29427944000008, 23.09086020400008],
              [113.28905340400001, 23.092315372000087],
              [113.284455149, 23.093075896000073],
              [113.2832708200001, 23.092656996000073],
              [113.27818570200009, 23.090633498000045],
              [113.27665333700008, 23.089379226000062],
              [113.27567843200006, 23.09146680300006],
              [113.27400728400005, 23.095572635000053],
              [113.27115207300005, 23.094039312000064],
              [113.26732239700004, 23.092018532000054],
              [113.2633540920001, 23.09041591400006],
              [113.26133543500009, 23.090624181000067],
              [113.25869046900004, 23.089788335000037],
              [113.256390474, 23.09270852600008],
              [113.254511761, 23.09556258200007],
              [113.25214612900004, 23.098486432000072],
              [113.25158974100009, 23.101897463000057],
              [113.24957228400001, 23.105308772000058],
            ],
          ],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [113.35573168000008, 22.956612995000057],
              [113.35697848500001, 22.956908083000087],
              [113.35866524900007, 22.95676444700007],
              [113.36350515700008, 22.956259609000085],
              [113.36783117000004, 22.954947864000076],
              [113.37457572400001, 22.95319937000005],
              [113.3832240800001, 22.95115850700006],
              [113.38512916800005, 22.949182887000063],
              [113.3857151520001, 22.946107399000084],
              [113.38644751300001, 22.94076163400007],
              [113.387253224, 22.93695392500007],
              [113.3893043280001, 22.932121848000065],
              [113.3912820700001, 22.928314903000057],
              [113.38923079900007, 22.92816692300005],
              [113.38329582100005, 22.928308163000054],
              [113.379045217, 22.92823041300005],
              [113.37787234200005, 22.92559248500004],
              [113.376699293, 22.92112356100006],
              [113.374720196, 22.92148730000008],
              [113.37259432000008, 22.921411298000066],
              [113.36753562800004, 22.921330970000042],
              [113.36474936100001, 22.921326780000072],
              [113.36122964900005, 22.92249303600005],
              [113.3599829960001, 22.922710720000055],
              [113.35411586700002, 22.922700760000055],
              [113.3500818330001, 22.92269358300007],
              [113.34714787500002, 22.92334737300007],
              [113.34832177100009, 22.927524108000057],
              [113.3495690210001, 22.932067155000084],
              [113.34956912000007, 22.93353192400008],
              [113.34949618100006, 22.939610584000036],
              [113.35074344400005, 22.944666299000062],
              [113.35221087000002, 22.95191955100006],
              [113.35573168000008, 22.956612995000057],
            ],
          ],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [113.26979874900007, 23.15920686800007],
              [113.27312981700004, 23.159036686000036],
              [113.27473810000004, 23.15943970400008],
              [113.27605926500007, 23.15984258600008],
              [113.27784005800004, 23.16024591200005],
              [113.2794485930001, 23.160304720000056],
              [113.28099975800001, 23.160248736000085],
              [113.28272332200004, 23.159446651000053],
              [113.283929822, 23.15806999600005],
              [113.28456178200008, 23.156807597000068],
              [113.28571091800006, 23.15577542200009],
              [113.28668773000004, 23.155087565000088],
              [113.28829671300002, 23.15468753500005],
              [113.28956099900006, 23.15480387300005],
              [113.29076788600003, 23.15526465700009],
              [113.29335414400009, 23.155095748000065],
              [113.29542326600006, 23.15463924800008],
              [113.29502081600003, 23.15308856900009],
              [113.29502076300002, 23.152284799000086],
              [113.29582535100008, 23.15073577700008],
              [113.2959976520001, 23.148726588000045],
              [113.295767641, 23.147290961000067],
              [113.29525026600004, 23.146256823000044],
              [113.29553758200007, 23.14516638400005],
              [113.293698242, 23.143958225000063],
              [113.2919739890001, 23.143439257000068],
              [113.28829594900003, 23.143377314000077],
              [113.28536531100008, 23.143316582000068],
              [113.2828945980001, 23.14325657800009],
              [113.2822050740001, 23.142394704000083],
              [113.28065378300005, 23.14153202500006],
              [113.27600044600001, 23.139461185000073],
              [113.27450697800009, 23.139230411000085],
              [113.27399013800004, 23.14078018200007],
              [113.27318610200007, 23.141985288000058],
              [113.2735883470001, 23.144798775000083],
              [113.27416279600004, 23.145890015000077],
              [113.27370336400008, 23.14692311400006],
              [113.27364614100009, 23.150080751000075],
              [113.2727272520001, 23.151400609000063],
              [113.27215299600005, 23.15272071600009],
              [113.27163618600002, 23.15404086800004],
              [113.27020048200006, 23.155188254000052],
              [113.26916684600008, 23.156335925000064],
              [113.26916693200008, 23.157598990000054],
              [113.26979874900007, 23.15920686800007],
            ],
          ],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [113.25843624100003, 23.162766658000066],
              [113.259885392, 23.16210096100008],
              [113.26407663200007, 23.15990842900004],
              [113.264037357, 23.158419868000067],
              [113.2637238740001, 23.157166246000088],
              [113.26384125000004, 23.154972632000067],
              [113.26388036800006, 23.15415002600008],
              [113.26313589800009, 23.151760264000075],
              [113.26297913100007, 23.15070256000007],
              [113.2628615220001, 23.149370658000066],
              [113.26250879700001, 23.146902683000064],
              [113.26219530200001, 23.145179001000088],
              [113.25812178000001, 23.14603999400009],
              [113.25580798400006, 23.147094528000082],
              [113.25510310700008, 23.147486247000074],
              [113.25298850900003, 23.14744716100006],
              [113.25118728900009, 23.146938124000087],
              [113.24891633000004, 23.145763378000083],
              [113.24848567200002, 23.145763483000053],
              [113.24832914000001, 23.14670367100007],
              [113.24860323500002, 23.147291194000047],
              [113.24860332200001, 23.14846637800008],
              [113.2496998690001, 23.152579265000043],
              [113.25028727600011, 23.154146057000048],
              [113.25079635000009, 23.15516445600008],
              [113.25165778100006, 23.15551688100004],
              [113.25302831200008, 23.156221843000083],
              [113.25518222900007, 23.15833707900009],
              [113.2562005210001, 23.15951227700009],
              [113.257610537, 23.161196789000087],
              [113.25843624100003, 23.162766658000066],
            ],
          ],
        },
      },
    ],
  };
  //多边形
  const polygonLayer = L.geoJSON(polygonData);

  // 构建图层标题及图例
  const getTitle = (text, borderColor, fillColor, isBorderDashed) => {
    return `<i style='display:inline-block;border:${
      isBorderDashed ? "dashed" : "solid"
    } 2px ${borderColor};background:${fillColor};width:20px;height:20px;position:relative;top:4px;'></i>
  <span style='padding-left:1px;margin-top: 2px;position: relative;top:1px;'>${text}</span>`;
  };

  // 构建图片形式的标题及图例
  const getImageTitle = (text, imgUrl, size) => {
    return `<div style='display:inline-block;width:${size}px;height:${size}px;position:relative;top:4px;'><img src='${imgUrl}' style='height:${size}px;'/></div>
  <span style='padding-left:1px;margin-top: 2px;position: relative;top:1px;'>${text}</span>`;
  };

  map.addLayer(baseLayer2); //地图默认加载的底图
  map.addLayer(labelPointLayer); //地图默认加载的叠加图层
  map.addLayer(polygonLayer); //地图默认加载的叠加图层
  const baseLayers = {
    [getImageTitle(`OSM街道图`, `./img/OSMVector.png`, 35)]: baseLayer1,
    [getImageTitle(`ArcGIS影像图`, `./img/arcgisImage.png`, 35)]: baseLayer2,
    [getImageTitle(`ArcGIS街道图`, `./img/arcgisVector.png`, 35)]: baseLayer3,
    [getImageTitle(`天地图街道图`, `./img/tdtVector.png`, 35)]: baseLayer4,
    [getImageTitle(`天地图影像图`, `./img/tdtImage.png`, 35)]: baseLayer5,
    // [getImageTitle(`谷歌街道图`, `./img/googleVector.png`, 35)]: baseLayer6,
    // [getImageTitle(`谷歌影像图`, `./img/googleImage.png`, 35)]: baseLayer7,
    [getImageTitle(`高德街道图`, `./img/gaodeVector.png`, 35)]: baseLayer8,
    [getImageTitle(`高德街道图`, `./img/gaodeImage.png`, 35)]: baseLayer9,
  };
  //底图切换控件
  const OHTER_SPOT_COLOR = "#006fff";
  const SPOT_FILL_COLOR = "rgba(0,0,255,0.15)";
  // 专题图层
  const overlayMaps = {
    [getImageTitle(`标注点`, `./img/labelPointMarker.png`, 20)]:
      labelPointLayer,
    [getTitle("多边形", OHTER_SPOT_COLOR, SPOT_FILL_COLOR)]: polygonLayer,
  };
  //底图切换控件
  L.control.layers(baseLayers, overlayMaps).addTo(map);
};
/*
 * 加载标注点聚合图层
 */
const addLabelClusterLayers = async (geojson, clusterlayer) => {
  let markerList = [];
  if (geojson.features.length > 0) {
    for (let i = 0; i < geojson.features.length; i++) {
      let marker = L.marker(
        new L.LatLng(
          geojson.features[i].geometry.coordinates[1],
          geojson.features[i].geometry.coordinates[0]
        )
      );
      markerList.push(marker);
    }
  }
  clusterlayer.addLayers(markerList);
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
